<template>
  <el-container class="main_con">
    <div class="filter_con ds_block" style="margin-bottom:20px">
      <div class="filter_head">
        <h2>发票列表</h2>
        <div class="filter_area">
          <label>时间：</label>
          <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            class="serach_input"
            :picker-options="pickerOptions"
          ></el-date-picker>
          <label class="ml_15">状态：</label>
          <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <!-- <label class="ml_15 mt_15">类型：</label>
        <el-select
          size="medium"
          v-model="obj.inoice_type"
          placeholder="请选择"
          class="mr_15 mt_15"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
          <el-button class="mr_15" @click="searchList" size="medium">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="filter_con nopt">
      <div class="orderlist">
        <div class="order_head">
          <table cellspacing="0" cellpadding="0" width="100%">
            <colgroup>
              <col width="150" />
              <col width="150" />
              <col width="180" />
              <col width="200" />
              <col width="180" />
              <col width="180" />
              <col width="90" />
              <col />
              <col width="150" />
            </colgroup>
            <tbody>
              <tr>
                <td>抬头</td>
                <td>税号</td>
                <td>地址</td>
                <td>邮箱</td>
                <td>电话</td>
                <td>申请时间</td>
                <td>状态</td>
                <td>备注</td>
                <td>操作</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="order" v-for="(item, i) in invoiceList" :key="i">
          <div class="header">
            <div class="txt">
              <div class="info">
                发票类型：
                <span :class="'t' + item.invoice_type">{{ item.invoice_type == 1 ? '个体' : '企业' }}</span>
              </div>
              <div class="info">下单时间：{{ item.order.create_time }}</div>

              <div class="info">订单编号：{{ item.order.order_no }}</div>
              <div class="info"><el-button type="text" @click="doCopy(item.order_no)">复制</el-button></div>
              <div class="info">
                订单来源：
                <i title="微信小程序" v-if="item.order.source == 1" class="weixin el-sc-xiaochengxu"></i>
                <i title="微信公众号" v-if="item.order.source == 2" class="weixin el-sc-weixin4"></i>
              </div>
            </div>
          </div>
          <div class="content">
            <table cellspacing="0" cellpadding="1" border="1" bordercolor="#dcdfe6" style="border-collapse:collapse;" width="100%">
              <colgroup>
                <col width="150" />
                <col width="150" />
                <col width="180" />
                <col width="200" />
                <col width="180" />
                <col width="180" />
                <col width="90" />
                <col />
                <col width="150" />
              </colgroup>
              <tbody>
                <tr>
                  <td>
                    <div class="pro">
                      <div class="txt">
                        <div class="name"></div>
                        <div class="class">{{ item.rise }}</div>
                      </div>
                    </div>
                  </td>
                  <td>{{ item.duty_paragraph }}</td>
                  <td>{{ item.address == 'undefined' ? '' : item.address }}</td>
                  <td>{{ item.mailbox }}</td>
                  <td>{{ item.phone }}</td>
                  <td>{{ item.create_time }}</td>
                  <td>{{ item.status }}</td>
                  <td>{{ item.remake }}</td>
                  <td>
                    <el-button type="text" @click="orderDetails(item.order.id)">查看订单</el-button>
                    <el-button type="text" v-if="item.status == '未审核'" @click="itemShow(item)">审核</el-button>
                    <el-button type="text" @click="itemShowdetail(item)">查看</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="order_empty" v-if="invoiceList.length == 0">暂无数据</div>
      </div>
      <div class="table_footer">
        <el-pagination @current-change="changePage" :current-page="page" class="pages" background layout="prev, pager, next" :total="total" hide-on-single-page></el-pagination>
      </div>
    </div>
    <el-dialog title="审核发票" :visible.sync="isShow" width="42%">
      <el-form ref="invoiceListRef" :model="editInvoiceList" label-width="80px" class="form-box">
        <el-form-item label="抬头">
          <div class="dialog_font">{{ editInvoiceList.rise }}</div>
        </el-form-item>
        <el-form-item label="税号">
          <div class="dialog_font">{{ editInvoiceList.duty_paragraph }}</div>
        </el-form-item>
        <el-form-item label="银行账号">
          <div class="dialog_font">{{ editInvoiceList.bank_account }}</div>
        </el-form-item>
        <el-form-item label="手机号码">
          <div class="dialog_font">{{ editInvoiceList.phone }}</div>
        </el-form-item>
        <el-form-item label="地址">
          <div class="dialog_font" v-if="editInvoiceList.address !== 'undefined'">{{ editInvoiceList.address }}</div>
        </el-form-item>
        <el-form-item label="邮箱">
          <div class="dialog_font">{{ editInvoiceList.mailbox }}</div>
        </el-form-item>

        <el-form-item label="状态">
          <el-select size="medium" v-model="editInvoiceList.status" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注"><el-input type="textarea" v-model="editInvoiceList.remake"></el-input></el-form-item>
        <div class="flex_box">
          <el-button type="primary" @click="eidtInvoice">提交</el-button>
          <el-button type="primary" plain @click="isShow = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="发票详情" :visible.sync="isShow1" width="42%">
      <el-form ref="invoiceListRef" :model="editInvoiceList" label-width="80px" class="form-box">
        <el-form-item label="抬头">
          <div class="dialog_font">{{ editInvoiceList.rise }}</div>
        </el-form-item>
        <el-form-item label="税号">
          <div class="dialog_font">{{ editInvoiceList.duty_paragraph }}</div>
        </el-form-item>
        <el-form-item label="银行账号">
          <div class="dialog_font">{{ editInvoiceList.bank_account }}</div>
        </el-form-item>
        <el-form-item label="手机号码">
          <div class="dialog_font">{{ editInvoiceList.phone }}</div>
        </el-form-item>
        <el-form-item label="地址">
          <div class="dialog_font" v-if="editInvoiceList.address !== 'undefined'">{{ editInvoiceList.address }}</div>
        </el-form-item>
        <el-form-item label="邮箱">
          <div class="dialog_font">{{ editInvoiceList.mailbox }}</div>
        </el-form-item>

        <el-form-item label="状态">
            <div class="dialog_font">{{ editInvoiceList.status }}</div>
          <!-- <el-select size="medium" v-model="editInvoiceList.status" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="备注">
          <div class="dialog_font">{{ editInvoiceList.remake }}</div>
      </el-form-item>
        <div class="flex_box">
          <!-- <el-button type="primary" @click="eidtInvoice">提交</el-button> -->
          <el-button type="primary" plain @click="isShow1 = false">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import {getInvoiceList, editInvoiceLister, getInvoiceRead} from '@/api/shop/invoice';
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      options: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '未审核'
        },
        {
          value: 2,
          label: '已通过'
        },
        {
          value: 3,
          label: '驳回'
        }
      ],
      options1: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '个人'
        }
      ],
      invoiceList: [],
      editInvoiceList: {},
      obj: {
        status: 0,
        inoice_type: 0,
        start_time: '',
        end_time: ''
      },
      objTemp: {},
      time: '',
      page: 1,
      size: 10,
      total: 0,
      isShow: false,
      isShow1: false
    };
  },
  components: {},
  mounted() {
    this.searchList();
  },
  methods: {
    // 查询
    searchList() {
      if (this.time) {
        this.obj.start_time = this.time[0];
        this.obj.end_time = this.time[1];
      }
      this.objTemp = Object.assign({}, this.obj);
      this.page = 1;
      this.getInvoiceLister();
    },
    getInvoiceLister() {
      let data = {
        ...this.objTemp,
        page: this.page,
        size: this.size
      };
      getInvoiceList(data).then(res => {
        this.total = res.msg.total;
        this.invoiceList = res.msg.data;
      });
    },
    changePage(page) {
      this.page = page;
      this.getInvoiceLister();
    },
    itemShow(lister) {
      getInvoiceRead(lister).then(res => {
        this.editInvoiceList = res.msg;
      });
      this.isShow = true;
    },
    itemShowdetail(lister) {
      getInvoiceRead(lister).then(res => {
        this.editInvoiceList = res.msg;
      });
      this.isShow1 = true;
    },
    orderDetails(id) {
      this.$router.push({
        path: '/order/list/item',
        query: {id: id, k: Math.random()}
      });
    },
    // 提交审核
    eidtInvoice() {
      if (this.editInvoiceList.status !== 1) {
        let data = {
          id: this.editInvoiceList.id,
          status: this.editInvoiceList.status,
          remake: this.editInvoiceList.remake
        };
        editInvoiceLister(data).then(res => {
          this.isShow = false;
          this.getInvoiceLister();
          return this.$message.success('操作成功！');
        });
      } else {
        this.isShow = false;
      }
    },
    // 删除发票
    itemDel() {}
  }
};
</script>

<style lang="scss" scoped>
.main_con {
  h1 {
    margin: 0.67em 0.35em;
  }
  .filter_con {
    padding-top: 15px;
    display: block;
    /deep/ .el-alert__title {
      font-size: 20px;
      color: #555;
      font-weight: bold;
    }
  }
  .flex_box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }
  .form-box {
    padding: 0px 20px;
    .el-input {
      width: 260px;
    }
  }
}
.dialog_font {
  font-weight: bold;
  color: #666;
}
.filter_head {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
//订单列表
.order {
  margin-top: 15px;

  &:first-child {
    margin-top: 0;
  }

  .header {
    background-color: #f4f6f8;
    height: 40px;
    line-height: 40px;
    display: flex;
    border: 1px solid #dcdfe6;
    border-bottom: 0;
    padding-left: 20px;
    color: #909399;
    font-size: 14px;

    .txt {
      flex: 1;
      display: flex;
      .info {
        display: inline-block;
        margin-right: 15px;
      }
    }

    .button {
      width: 200px;
      text-align: right;
      padding-right: 20px;
    }
  }

  .content {
    background: #dcdfe6;
    font-size: 14px;
    color: #606266;

    table {
      background: #fff;

      tr {
        td {
          padding: 17px 17px 0 17px;
          line-height: 28px;
          //border: 1px solid #DCDFE6;
          border: none;
          .pro {
            display: flex;

            .img {
              width: 80px;
              height: 80px;
              margin-right: 10px;
            }

            .txt {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-content: space-between;
            }
          }
        }
        &:last-child {
          td {
            padding: 17px;
          }
        }
      }
    }
  }
}
.t0 {
  color: #409eff;
  font-weight: 700;
  margin-right: 5px;
}

.t1 {
  color: #f56c6c;
  font-weight: 700;
  margin-right: 5px;
}
.orderlist {
  width: 100%;
  display: flex;
  flex-direction: column;

  .order_head {
    border-bottom: 1px solid #dcdfe6;
    font-weight: 700;
    color: #909399;
    font-size: 14px;

    table {
      tr {
        td {
          padding: 10px 20px 20px;
          // text-align: center;
        }
      }
    }
  }
}
.order_empty {
  color: #c0c4cc;
  font-size: 14px;
  text-align: center;
  height: 100px;
  line-height: 150px;
}
</style>
